<template>
  <div id="data-engine-repair-chart" style="width: 100%"></div>
</template>
<script>
import Highcharts, { color } from "highcharts/highstock";
export default {
  data() {
    return {};
  },
  created() {
    setTimeout(() => {
      // 初始化表格
      var chart = Highcharts.chart("data-engine-repair-chart", {
        chart: {
          type: "column",
          backgroundColor: "#0000",
          height: "700",
        },
        labels: {
          style: {
            color: "#000",
          },
        },
        title: {
          text: "维修次数年度统计",
          style: {
            color: "#000",
            fontSize: "24px",
            fontWeight: "550",
          },
        },
        xAxis: {
          labels: {
            // interval: 0,
            // rotation: 90,
            style: {
              color: "#000",
              fontSize: "16px",
            },
          },
          grid: {},
          categories: [
            "2009",
            "2010",
            "2011",
            "2012",
            "2013",
            "2014",
            "2015",
            "2016",
            "2017",
            "2018",
            "2019",
            "2020",
          ],
          // crosshair: true,
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
            style: {
              color: "#000",
            },
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:16px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} </b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
          bar: {
            // color:'#fff'
          },
        },
        legend: {
          enabled: true,
        },
        series: [
          {
            name: "<b >大车</b>",
            data: [1,4,4,2,1,4,3,3,0,0,1,0],
          },
          {
            name: "<b >主小车</b>",
            data: [6,4,7,1,0,5,0,2,0,1,0,0],
          },
          {
            name: "<b >主起升</b>",
            data: [0,0,4,5,8,7,7,4,5,1,4,1],
          },
          {
            name: "<b >副小车</b>",
            data: [2,0,3,0,0,0,0,2,0,0,0,0],
          },
          {
            name: "<b >副起升</b>",
            data: [0,0,2,1,0,2,0,0,2,0,0,0],
          },
          {
            name: "<b >其他</b>",
            data: [0,0,1,0,1,9,0,1,1,0,0,0],
          },
        ],
      });
    }, 0);
  },
};
</script>
